<script setup lang="ts">
import { useStore } from 'vuex';
import {computed} from 'vue'; // 导入computed
const store = useStore(); // 导入store

// 使用getter来获取fileUrl状态
const file = computed(()=>{
  // console.log("show", store.getters.getFileUrl)
  return store.getters.getFile}
);
const detect=computed(()=>{

  return store.getters.getDetect
});
let flag=computed(()=>store.getters.getDetectFlag)

// function decoding(dataurl:string) {
//   var arr = dataurl.split(',')
//   const base64 = arr[1];
//   let bstr = atob(base64) // 获得base64解码后的字符串
//   let n = bstr.length
//   let u8arr = new Uint8Array(n) // 新建一个8位的整数类型数组，用来存放ASCII编码的字符串
//   while (n--) {
//     u8arr[n] = bstr.charCodeAt(n) // 转换编码后才使用charCodeAt 找到Unicode编码
//   }
//   let blob = new Blob([u8arr], { type: 'video/mpeg4' })
//   let url = URL.createObjectURL(blob)
//   return url
// }

</script>

<template>
  <div class="text">
    <text>输入</text>
    <text>检测结果</text>
  </div>
  <div class="show">
    <div class="input">
      <img v-if="file.type=='image'"  :src="file.url" class="source">
      <video v-else-if="file.type=='video'" width="640" height="360" controls :src="file.url">

        Your browser does not support the video tag.
      </video>

    </div>

    <div class="detect">

      <img v-if="detect.url!=''&&flag&&detect.type=='image'" :src="detect.url" class="source">
      <video v-else-if="detect.url!=''&&flag&&detect.type=='video'" width="640" height="360" controls :src="detect.url">
        Your browser does not support the video tag.
      </video>
      <text v-else-if="flag">检测中，请稍后...</text>
      <text v-else></text>
    </div>

  </div>
</template>

<style lang="scss">
  .source{
    width: 400px; /* 设置宽度为100% */
    height: auto; /* 自动计算高度，以保持图像比例 */

  }
  .text{
    display: flex;
    justify-content: space-around;
  }
  .show{
    display: flex;
    justify-content: space-around;
    //img{
    //  width: 30%; /* 图片不会超过其容器的宽度 */
    //  height: 30%; /* 图片不会超过其容器的高度 */
    //}
    .detect{
      display: flex;
      justify-content: center;
      align-items: center;
      //img{
      //  width: 80%;
      //  height: 100%;
      //}
    }
  }

</style>
